// frontend/src/admin/RoomManagement.js

import React, { useState, useEffect } from 'react';
import {
    Table,
    Button,
    Form,
    Input,
    Select,
    Modal,
    message,
    Upload,
    Tag
} from 'antd';
import { UploadOutlined, PlusOutlined } from '@ant-design/icons';
import { adminAPI } from '../services/api';
import * as XLSX from 'xlsx'; // 导入 xlsx 库

const { Option } = Select;

const RoomManagement = () => {
    const [rooms, setRooms] = useState([]);
    const [form] = Form.useForm();
    const [importModalVisible, setImportModalVisible] = useState(false);
    const [fileList, setFileList] = useState([]);
    const [previewData, setPreviewData] = useState([]); // 新增：用于存储解析后的Excel预览数据
    const [importLoading, setImportLoading] = useState(false); // 新增：导入时的加载状态

    useEffect(() => {
        fetchRooms();
    }, []);

    const fetchRooms = async () => {
        try {
            const { data } = await adminAPI.getAllRooms();
            setRooms(data);
        } catch (error) {
            console.error('获取房间列表失败:', error);
            message.error('获取房间列表失败');
        }
    };

    const onFinish = async (values) => {
        try {
            await adminAPI.addRoom(values);
            message.success('房间添加成功');
            form.resetFields();
            fetchRooms();
        } catch (error) {
            console.error('添加房间失败:', error);
            message.error(error.response?.data?.message || '添加房间失败');
        }
    };

    // 新增：处理Excel文件上传前的解析逻辑
    const handleExcelFileUpload = (file) => {
        setImportLoading(true); // 开始读取文件时设置加载状态
        const reader = new FileReader();

        reader.onload = (e) => {
            try {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: 'array' });

                const sheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[sheetName];

                // header: 1 表示第一行是标题行，raw: false 表示尝试转换数据类型
                const json = XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: false });

                if (json.length === 0) {
                    message.error('文件内容为空或格式不正确！');
                    setPreviewData([]);
                    setFileList([]);
                    return;
                }

                const headers = json[0];
                let rows = json.slice(1); // 获取数据行，使用let以便后续过滤

                const requiredHeaders = ['房间号', '房间类型', '床位数', '价格'];
                const trimmedHeaders = headers.map(h => typeof h === 'string' ? h.trim() : h);

                const isHeaderValid = requiredHeaders.every((val, index) => trimmedHeaders[index] === val);

                if (!isHeaderValid || headers.length !== requiredHeaders.length) {
                    message.error('Excel 文件标题行不符合要求！请确保是 "房间号, 房间类型, 床位数, 价格"。');
                    setPreviewData([]);
                    setFileList([]);
                    return;
                }

                // !!! 新增的关键过滤步骤和类型转换处理 !!!
                rows = rows.filter(row => {
                    // 过滤掉room_number为空或无效的行
                    // 确保 row[0] 存在且不是 null/undefined，并且转换为字符串后去除空白不是空字符串
                    return row[0] !== undefined && row[0] !== null && String(row[0]).trim() !== '';
                });

                if (rows.length === 0) {
                    message.error('文件中没有有效的房间数据可供导入！');
                    setPreviewData([]);
                    setFileList([]);
                    return;
                }

                const formattedPreview = rows.map((row, index) => {
                    // 确保每一行有足够的列，并处理可能的undefined
                    // 进行显式类型转换和去除字符串空白
                    return {
                        key: `preview-${index}`, // Ant Design Table 需要 key
                        room_number: String(row[0] || '').trim(), // 确保是字符串并去除空白，处理undefined/null情况
                        room_type: String(row[1] || '').trim(),
                        beds: parseInt(row[2], 10) || 0, // 确保是整数，处理非数字或undefined情况
                        price: parseFloat(row[3]) || 0.00, // 确保是浮点数，处理非数字或undefined情况
                    };
                });

                // 进一步验证解析后的数据是否符合基本要求
                const invalidData = formattedPreview.filter(item => (
                    !item.room_number || // 房间号为空
                    !item.room_type || // 房间类型为空
                    isNaN(item.beds) || item.beds <= 0 || // 床位数无效
                    isNaN(item.price) || item.price < 0 // 价格无效
                ));

                if (invalidData.length > 0) {
                    message.warn(`部分导入数据格式不正确（共 ${invalidData.length} 条），请检查预览数据！`);
                    // 这里你可以选择不阻止导入，而是只导入有效数据，或者根据需求进行提示
                }
                // !!! 过滤和转换结束 !!!

                setPreviewData(formattedPreview);
                setFileList([file]); // 设置文件列表，只保留当前上传的文件
                message.success(`${file.name} 文件读取成功，请预览并点击“确定”开始导入！`);
            } catch (error) {
                console.error('解析Excel文件失败:', error);
                message.error('文件解析失败，请检查文件格式。');
                setPreviewData([]);
                setFileList([]);
            } finally {
                setImportLoading(false); // 文件读取完毕后取消加载状态
            }
        };

        reader.onerror = () => {
            message.error('文件读取失败！');
            setImportLoading(false);
        };

        reader.readAsArrayBuffer(file); // 关键：使用 readAsArrayBuffer
        return false; // 阻止 Ant Design 自动上传
    };

    // 修改：Modal 的 onOk 触发的导入逻辑
    const handleStartBulkImport = async () => {
        if (previewData.length === 0) {
            message.warn('没有数据可以导入！请先选择并解析Excel文件。');
            return;
        }

        setImportLoading(true);
        try {
            // 这里传递给后端的数据已经是经过过滤和类型转换的了
            const importData = previewData.map(item => ({
                room_number: item.room_number,
                room_type: item.room_type,
                beds: item.beds,
                price: item.price,
            }));

            const response = await adminAPI.bulkImportRooms(importData);
            message.success(response.message || `成功导入 ${response.importedCount || 0} 个房间！`);
            setPreviewData([]); // 清空预览数据
            setFileList([]); // 清空文件列表
            setImportModalVisible(false); // 关闭Modal
            fetchRooms(); // 重新获取房间列表
        } catch (error) {
            console.error('批量导入失败:', error);
            // 后端返回的错误信息通常在 error.response.data.message 或 error.response.data.error
            message.error(error.response?.data?.message || error.response?.data?.error || '房间批量导入失败！');
        } finally {
            setImportLoading(false);
        }
    };


    // 状态标签颜色映射
    const statusColor = {
        '空闲': 'green',
        '已入住': 'blue',
        '维护中': 'red'
    };

    const columns = [
        { title: '房间号', dataIndex: 'room_number', key: 'room_number' },
        { title: '类型', dataIndex: 'room_type', key: 'room_type' },
        { title: '床位数', dataIndex: 'beds', key: 'beds' },
        { title: '价格', dataIndex: 'price', key: 'price', render: price => `¥${parseFloat(price).toFixed(2)}` },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: status => <Tag color={statusColor[status]}>{status}</Tag>
        },
    ];

    // 新增预览数据的列定义，与主表格列一致
    const previewColumns = [
        { title: '房间号', dataIndex: 'room_number', key: 'preview_room_number' },
        { title: '房间类型', dataIndex: 'room_type', key: 'preview_room_type' },
        { title: '床位数', dataIndex: 'beds', key: 'preview_beds' },
        { title: '价格', dataIndex: 'price', key: 'preview_price', render: price => `¥${parseFloat(price).toFixed(2)}` },
    ];

    return (
        <div>
            <div style={{ marginBottom: 16 }}>
                <Button
                    type="primary"
                    onClick={() => {
                        setImportModalVisible(true);
                        setFileList([]); // 每次打开Modal清空文件列表和预览数据
                        setPreviewData([]);
                    }}
                    style={{ marginRight: 16 }}
                >
                    批量导入
                </Button>
            </div>

            <Form
                form={form}
                layout="inline"
                onFinish={onFinish}
                style={{ marginBottom: 16 }}
            >
                <Form.Item
                    name="room_number"
                    label="房间号"
                    rules={[{ required: true, message: '请输入房间号' }]}
                >
                    <Input placeholder="如: 101" />
                </Form.Item>

                <Form.Item
                    name="room_type"
                    label="房间类型"
                    rules={[{ required: true, message: '请选择房间类型' }]}
                >
                    <Select style={{ width: 120 }}>
                        <Option value="标准间">标准间</Option>
                        <Option value="大床房">大床房</Option>
                        <Option value="套房">套房</Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    name="beds"
                    label="床位数"
                    rules={[{ required: true, message: '请输入床位数' }]}
                >
                    <Input type="number" min={1} style={{ width: 80 }} />
                </Form.Item>

                <Form.Item
                    name="price"
                    label="价格"
                    rules={[{ required: true, message: '请输入价格' }]}
                >
                    <Input type="number" min={0} step={0.01} prefix="¥" style={{ width: 120 }} />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">添加房间</Button>
                </Form.Item>
            </Form>

            <Table
                dataSource={rooms}
                columns={columns}
                rowKey="room_id"
                bordered
            />

            {/* 批量导入的Modal */}
            <Modal
                title="批量导入房间"
                open={importModalVisible}
                onOk={handleStartBulkImport} // 调用新的导入函数
                onCancel={() => {
                    setImportModalVisible(false);
                    setFileList([]);
                    setPreviewData([]);
                }}
                okText="开始导入"
                cancelText="取消"
                confirmLoading={importLoading} // 确定按钮的加载状态
                destroyOnClose={true} // 关闭时销毁子组件，确保状态重置
            >
                <p>请上传Excel文件（支持.xlsx, .xls格式）。</p>
                <Upload
                    accept=".xlsx, .xls"
                    beforeUpload={handleExcelFileUpload} // 使用新的Excel文件处理函数
                    fileList={fileList}
                    onRemove={() => { setFileList([]); setPreviewData([]); }}
                    maxCount={1} // 只允许上传一个文件
                >
                    <Button icon={<UploadOutlined />}>选择Excel文件</Button>
                </Upload>
                <div style={{ marginTop: 16, color: '#999', fontSize: 12 }}>
                    <p>文件格式要求：</p>
                    <ul>
                        <li>文件格式: Excel (xlsx 或 xls)</li>
                        <li>第一个为标题行: "房间号", "房间类型", "床位数", "价格"</li>
                        <li>示例数据:</li>
                        <Table
                            dataSource={[
                                { key: 'ex1', room_number: 101, room_type: '标准间', beds: 2, price: 300 },
                                { key: 'ex2', room_number: 102, room_type: '大床房', beds: 1, price: 350 },
                            ]}
                            columns={previewColumns} // 使用预览列
                            pagination={false}
                            size="small"
                            style={{ width: '100%', marginBottom: '10px' }}
                        />
                    </ul>
                </div>

                {previewData.length > 0 && (
                    <h2 style={{ marginTop: '20px' }}>预览数据 (共 {previewData.length} 条)</h2>
                )}
                <Table
                    columns={previewColumns} // 使用预览列
                    dataSource={previewData}
                    pagination={{ pageSize: 5 }} // 可以添加分页
                    bordered
                    size="small"
                />
            </Modal>
        </div>
    );
};

export default RoomManagement;